Design System · v1.0 · Nombre de empresa de seguridad
AION

El sistema de diseño
de AION Vision Hub

Identidad táctica dark-first para una plataforma de seguridad y vigilancia enterprise. Una sola fuente de verdad para color, tipografía, espaciado y componentes — coherente en sala de control y app del guardia.

01

Principios

A

Dark-first táctico

Pensado para salas de control 24/7: fondos profundos navy, baja fatiga visual, jerarquía por luz y no por saturación.

B

La señal manda

El color se reserva para estado (operativo, alerta, crítico). El rojo de marca es para acción; el resto de la UI es sobrio.

C

Densidad con aire

Enterprise = mucha información. Tipografía legible, números tabulares y espaciado consistente para escanear rápido.

02

Color

Navy · Rojo · Gold + estados
Navy superficies · profundidad de sala de control
navy-950#020610
navy-900#050b16
navy-850#07101d
navy-800#0a1626
navy-700#0f2032
navy-600#16304a
navy-500#2c4a68
Rojo Clave acción · marca · acentos críticos
red-500#3dc3d6
red-600 · accent#11a7bd
red-700#0d8fa5
Gold premium · destacados · marca secundaria
gold-400#e0b53d
gold-500#d4a017
gold-600#b8870f
Estados semánticos monitoreo · salud · alertas
Operativo
#2fcf8f
Advertencia
#e8b13a
Crítico
#f04444
Información
#5aa9f0
Neutral
#6c819a
Texto sobre fondo oscuro jerarquía por luminancia
fg#eef3f9
fg-2#c4d0de
fg-3#8a9cb0
fg-4#5e7088
surface-3#0a1626
surface-1#050b16
bg#020610
03

Tipografía

Montserrat · Inter · JetBrains Mono
Montserrat — Display & Headings
Aa Bb Cc 1234567890weights 600 / 700 / 800 / 900uso: títulos, métricas, números grandes
Inter — Body & UI
Aa Bb Cc 1234567890weights 400 / 500 / 600 / 700uso: texto, etiquetas, botones, formularios
JetBrains Mono — Data & Code
Aa Bb Cc 1234567890tabular-numsuso: placas, IPs, horas, IDs, endpoints, métricas
DisplayCentro de OperacionesMontserrat 900
56 / 1.0
H1Minuta de TurnoMontserrat 800
38 / 1.1
H2 / Page titleInstalación y ServiciosMontserrat 700
26 / 1.2
Body largeBitácora digital con análisis predictivo.Inter 400
17 / 1.55
BodyRegistros manuales más eventos del sistema como entradas automáticas.Inter 400
14 / 1.5
Label · upAnálisis predictivoInter 700 · uppercase
11 / +0.14em
Mono / dataTZK·482 · 03:41 · 12msJetBrains Mono 500
14 · tnum
04

Espaciado, radios y sombras

Escala de espaciado

4px
8px
12px
16px
18px
24px
40px

Radios de borde

5
8
12
16
pill

Elevación / sombras

sm
md
lg
glow
05

Componentes

tomados del Command Center
Botones
Tags / Badges
● Operativo Advertencia Crítico AUTO IA
Status dots
En vivo Reintenta Caído Inactivo
Campos de formulario
Card + Metric strip
Análisis predictivo IA
42
Registros
18
AUTO
3
Patrones
Healthcheck
postgresql3ms
redis1ms
hik_bridgeskipped
06

Marca

logotipo y uso
AION
Vision Hub · Nombre de empresa de seguridad
AION
versión sobre claro

El glifo combina escudo (protección), lente (visión) y plomada (precisión). Mantén el área de respeto = altura de la "A". No deformar, no recolorear el escudo fuera de la paleta de marca.